<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游-酒店详情</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
    <link rel="stylesheet" href="/static/index/css/baseDetail.css">
    <link rel="stylesheet" href="/static/index/css/hotelDetail.css">
</head>
<body>

{include file="public/header" model='hotel' /}

<div class="searchBox layui-hide-xs">
    <div class="layui-container mbx-top-nav">
        <div class="mianbaoxie-nav">
            <span class="layui-breadcrumb">
              <a href="/">首页</a>
              <a href="{:url('tour/tourList')}">酒店列表</a>
              <a><cite>{$hotel.hotel_name}</cite></a>
            </span>
        </div>

        <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=5&py=linyi2" width="200" height="30" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
        </div>
    </div>
</div>

<div class="tour-detail">
    <div class="layui-container">
        <div class="tour-detail-box tour-detail-top">
            <div class="layui-row">
                <div class="layui-col-md6 layui-col-xs12">
                    <div class="tour-title">
                        <h1>{$hotel.hotel_name}</h1>
                        <span><i class="layui-icon layui-icon-rate" style="font-size: 16px; color: #F2BF56;"></i>收藏</span>
                    </div>
                    <div class="tour-tags">
                        {foreach $hotel.hotel_tag as $k => $v}
                        <span>{$v}</span>
                        {/foreach}
                    </div>
                </div>
                <div class="layui-col-md6 layui-col-xs12">

                    <div class="tour_tobuy_md  layui-hide-xs">
                        <div class="buy-button">
                            <a href="javascript:;">立即购买</a>
                        </div>
                        <p>已售{$hotel.sum_sale}</p>
                    </div>

                    <div class="tour_tobuy_xs  layui-hide-md">

                        <a href="javascript:;">前往app下单</a>
                        <span>已售{$hotel.sum_sale}</span>

                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space30">
                <div class="layui-col-md7 layui-col-xs12">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md8  layui-col-xs12">
                            <div class="tour_l_img">
                                {notempty name="hotelImg[0]['img_path']"}
                                <img lay-src="{$hotelImg[0]['img_path']}" alt="">
                                {/notempty}
                            </div>
                        </div>
                        <div class="layui-col-md4  layui-col-xs12">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="hotelImg[1]['img_path']"}
                                        <img lay-src="{$hotelImg[1]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                                <div class="layui-col-md12  layui-col-xs6">
                                    <div class="tour_r_img">
                                        {notempty name="hotelImg[2]['img_path']"}
                                        <img lay-src="{$hotelImg[2]['img_path']}" alt="">
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5  layui-col-xs12">

                    <div class="open-time">
                        <i class="layui-icon layui-icon-cellphone" style="font-size: 18px; color: #20E6BA;"></i>&nbsp;
                        酒店电话：<span id="open_time">{$hotel.hotel_tel}</span>
                    </div>
                    <div class="tour-address">
                        <div class="tour-address-l">
                            <i class="layui-icon layui-icon-location" style="font-size: 18px; color: #20E6BA;"></i>
                            酒店地址：<span id="tour_address">{$hotel.address}</span>
                        </div>
                        <div class="tour-address-r">
                            <a href="javascript:;">[ 查看地图 ]</a>
                        </div>
                    </div>
                    <div class="tour-rate">
                        <div class="tour-rate-top">
                            <div class="tour-rate-top-icon">
                                <i class="layui-icon layui-icon-face-smile"
                                   style="font-size: 18px; color: #FFAD6D;"></i>
                                &nbsp;
                                好评率{$hotel['rate']}%
                            </div>
                            <div class="tour-rate-top-a">
                                <a href="javascript:;">查看全部{$hotel.comment_count}条评论 ></a>
                            </div>
                        </div>

                        <div class="comment-content">
                            {$hotel.latests_comment.content}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-container ticket-box">
        <div class="tour-detail-box tour-detail-midle">
            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">酒店房型</div>
                </div>
            </div>

            <div class="layui-row">

                {foreach $hotelRoom as $k => $v}
                <div class="layui-col-md12">

                    <div class="ticket-detail">

                        <div class="layui-row">

                            <div class="layui-col-md3">
                                <div class="ticket-name">
                                    {$v.room_name}
                                    <i class="layui-icon layui-icon-triangle-d" style="font-size: 16px; color: #2D9FFF;"></i>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="ticket-tags">
                                    随时退
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-price">
                                    <sup>￥</sup>

                                    {if $v.is_tehui == 1}
                                    {$v.room_discount_price*1}
                                    {else/}
                                    {$v.room_price*1}
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-is-discount">
                                    {if $v.is_tehui == 1}
                                    <span>今日特惠</span>
                                    {/if}
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="ticket-btn-box">
                                    <a href="javascript:;">立即购买</a>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                {/foreach}
            </div>

        </div>
    </div>


    <div class="layui-container ticket-info">
        <div class="tour-detail-box tour-detail-midle">

            <div class="layui-row ticket-t">
                <div class="layui-col-md1">
                    <div class="target-s">酒店简介</div>
                </div>
                <div class="layui-col-md1">
                    <div class="target-s target-s-no">地图指南</div>
                </div>
                <div class="layui-col-md1">
                    <div class="target-s target-s-no">用户评价</div>
                </div>
            </div>


            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        景点简介
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content">
                        <p>“人人那个都说哎沂蒙山好，沂蒙哪个山上哎好风光，青山那个绿水哎多好看……”在革命战争年代，陈毅、罗荣桓、徐向前等老一辈革命家曾指挥过战斗，用乳汁救伤员的红嫂的故乡沂水县，惊现一处神奇的地下奇观——山东地下大峡谷，为古老的沂蒙大地又增添了一处旅游胜景。</p>
                        <p>山东地下大峡谷旅游区位于山东省沂水县，是一座风貌奇特的溶洞王国，是“沂蒙地下地质奇观核心景区”、“全省重点探险项目”、“山东十大最受欢迎旅游景区之一”、 “山东十大最美的地方”、“中国十大漂流胜地”、“国家地质公园”、国家AAAA级旅游区。</p>
                        <p>洞穴沿290-320度方向延伸，由一条西北/东南走向的巨大喀斯特裂隙发育而成，形成于约0.65亿年至2.3亿年前。</p>
                        <p>洞体长度6100米，目前已开发3100米。洞内分九大景段，有“一河”、“九泉”、“九宫”、“十二瀑”、“十二峡”等景观一百余处。</p>
                        <p>地下大峡谷漂流被上海大世界基尼斯记录总部认证为“中国最长溶洞漂流”。该旅游区是集休闲、游憩、娱乐、度假、溶洞漂流为一体的旅 游项目。</p>
                        <p>集团在地下大峡谷旅游区利用暗河水势开发的漂流项目，及其巧妙地挖掘了溶洞的资源优势，是地下地质奇观溶洞旅游品牌升级的创举。</p>
                        <p>它长1000米，充分体现了溶洞内的幽深莫测，起伏高下，惊险刺激，波激浪涌，抑扬顿挫，激情洋溢，无危险性，将地下河漂流的原生野始演绎的淋漓尽致，迎合了游客的消费需求，已深得游客们的信赖与喜爱，树立了“中国地下河漂流第一洞”的市场品牌，并得到上海大世界基尼斯记录总部的认证。</p>
                        <p>山东地下大峡谷旅游区的全天候管轨电动滑道车是全国最长的环保游览项目之一，该项目属国内领先技术。</p>
                        <p>管轨电动滑道车从地下大峡谷旅游区龙岗山顶龙翔阁前出发，沿山势而下，直达地下大峡谷入洞口。</p>
                        <p>全长2800米，落差50余米，轨道设计建设蜿蜒曲折，似蛟龙腾飞，如长虹卧波，十分壮观，滑道车车体长，车身宽、操纵杆操作，安全刹车装置，游客可自行控制车速，设计车速可达15公里/小时，乘坐舒适，安全可靠，惊险刺激。</p>
                        <p>游客乘坐该管轨车，不仅可免去步行的疲劳，节省游览时间，亦可俯视地下大峡谷全景，一路欣赏沿途田园风光，近察远观、悠然自得，感受前所未有的动感体验。</p>
                        <p>管轨电动滑道车操作简易，动感十足，是一项极具趣味性的观光旅游项目。</p>
                    </div>

                </div>

            </div>

            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        地图指南
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="map_content" style="width: 100%;height:400px"></div>

                </div>

            </div>

            <div class="layui-row ticket-discript">

                <div class="layui-col-md12">
                    <div class="ticket-discript-title">
                        用户评价
                    </div>
                </div>

                <div class="layui-col-md10 layui-col-md-offset1">

                    <div class="ticket-discript-content" id="ticket-discript-content">


                    </div>

                    <div id="comment-page"></div>

                </div>

            </div>

        </div>

    </div>

</div>


{include file="public/footer"  /}

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=358e193808b3b90caecc22bb5dfd23b8"></script>
<script>
    //一般直接写在一个js文件中
     var $ = layui.jquery;
        var layer = layui.layer
            , element = layui.element
            , carousel = layui.carousel
            , flow = layui.flow
            , laypage = layui.laypage
            , form = layui.form;

        flow.lazyimg();

        var map = new AMap.Map('map_content', {
            zoom:11,//级别
            scrollWheel: false,
            center: [{$hotel.longitude},{$hotel.latitude}],//中心点坐标
            viewMode:'3D'//使用3D视图
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat({$hotel.longitude},{$hotel.latitude}),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '{$hotel.hotel_name}'
        });

        map.plugin(["AMap.ControlBar"],function(){
            var controlBar = new AMap.ControlBar({showZoomBar:true})
            map.addControl(controlBar)
        });

        map.add(marker);

        //执行一个laypage实例
        laypage.render({
                elem: 'comment-page' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: {$hotel.comment_count} //数据总数，从服务端得到
                ,prev:'<i class="layui-icon layui-icon-left"></i>'
                ,next:'<i class="layui-icon layui-icon-right"></i>'
                ,limit:5
                ,jump: function(obj, first){
                $.ajax({
                    type: "post",
                    url: "{:url('hotel/getComment')}",
                    data: {page:obj.curr,tour_id:{$hotel.hotel_id}},
                    success:function(data){
                    var system_str = '';
                    $.each(data.data,function(k,v){

                        system_str += '<div class="ticket-comment-li">';
                        system_str += '<div class="ticket-comment-user">';
                        system_str += '<div class="ticket-comment-user-l">';
                        system_str += '<div class="comment-user-img">';
                        system_str += '<img src="'+ v.user_icon +'" alt="">';
                        system_str += '</div>';
                        system_str += '<div class="comment-user-name">';
                        system_str += v.nickname;
                        system_str += '</div>';
                        system_str += '<div class="comment-user-tag">';

                        if (v.eval_status == 1){
                            system_str += '<span>好评</span>';
                        } else {
                            system_str += '<span>差评</span>';
                        }

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '<div class="ticket-comment-user-r">';
                        system_str += v.create_time;
                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '<div class="ticket-comment-content">';
                        system_str += v.content;
                        system_str += '</div>';

                        system_str += '<div class="ticket-comment-img">';
                        system_str += '<div class="layui-row layui-col-space20">';

                        for(i = 0;i < v.images.length;i++){

                            system_str += '<div class="layui-col-md4">';
                            system_str += '<div class="comment-img">';
                            system_str += '<img src="'+v.images[i]+'" alt="">';
                            system_str += '</div>';
                            system_str += '</div>';

                        }

                        system_str += '</div>';
                        system_str += '</div>';
                        system_str += '</div>';


                });

                $('#ticket-discript-content').html(system_str);

            }
        });
        }
    });
</script>
</body>
</html>